<template>
  <view class="select">
    <view class="choose-select" :style="{background:headbgcol}">
      <view class="select-head" @click="changeoption">
        <image src="../../static/image/btn2.png" mode="" v-if="hasbgimg" class="bg-img"></image>
        <view class="choose-value" :style="{color:choosetextcol}">{{chooseitemvalue}}</view>
        <image src="../../static/image/right2.png" mode="" class="right-row"
          :style="{ transform: 'rotate(' + rot + 'deg)' }"></image>
      </view>
      <view class="select-list">
        <view class="select-list-con" :style="{ height: optionConH + 'rpx' }">
          <view class="select-list-item" v-for="(item,index) in optionlist" @click="chooseitem(item.text)" :key="item.id" :style="{background:itembgcol}">
            <image src="../../static/image/btn4.png" mode="" class="list-item-bg" v-if="hasitembg"></image>
            <view class="list-item-value" :style="{color:chooseitemcol}">
              {{item.text}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<!-- hasbgimg:头部是否有背景图片 -->
<!-- headbgcol：头部设置的背景颜色 -->
<!-- choosetextcol:当前选择项的颜色 -->
<!-- hasitembg每个选择项是否有背景图片 -->
<!-- chooseitemcol：选择项文字的颜色 -->
<!-- itembgcol:选择项背景颜色 -->

<script>
  export default {
    name: "Selectcon",
    props:["hasbgimg","headbgcol","choosetextcol","hasitembg","chooseitemcol","itembgcol","optionlist"],
    data() {
      return {
        // hasbgimg: true,
        rot: 0,
        ischose: false,
        optionConH: 0,
        chooseitemvalue:'全部',
      };
    },
    methods: {
      // 控制旋转
      // 切换显示下拉选择区域
      changeoption() {
        if (!this.ischose) {
          this.rot = 90;
          this.optionConH = 600
        } else {
          this.optionConH = 0;
          this.rot = 0;
        }
        this.ischose = !this.ischose;
      },
      chooseitem(value) {
        this.chooseitemvalue = value
        console.log("选择了"+value);
        // 向父组件传选择到的值
        this.$emit('choose',value);
        this.rot = 0;
        this.optionConH = 0;
        this.ischose = false;
      },
      
    }
  }
</script>

<style scoped>
  .choose-select {
    position: relative;
    width: 160rpx;
    height: 70rpx;
  }

  .choose-value {
    position: absolute;
    left: 30rpx;
    font-size: 30rpx;
    color: #00aaff;
    top: 16rpx;
    font-weight: 600;
  }

  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .right-row {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    width: 35rpx;
    height: 35rpx;
    transition: all 0.5s;
  }

  .select-list {
    position: absolute;
    top: 100rpx;
    left: 0;
    z-index: 99;
    height: 0;
    width: 100%;
  }

  .select-list-item {
    position: relative;
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    margin-bottom: 20rpx;
    color: #00aaff;
    overflow: auto;
    overflow-y: scroll;
  }
  
  .select-list-con {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      width: 160rpx;
      overflow: hidden;
      transition: all 0.5s;
      z-index: 99;
  }
  
  .list-item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .list-item-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
  }
</style>
